<template>
  <div>
    <nav-bar>
      <template v-slot:default>分类页面</template>
    </nav-bar>
    <div id="mainbox">
      <div class="ordertab">
        <!-- 上方排序 -->
        <van-tabs v-model:active="active" @click="tabClick">
          <van-tab title="销量排序"></van-tab>
          <van-tab title="价格排序"></van-tab>
          <van-tab title="评论排序"></van-tab>
        </van-tabs>
      </div>

      <!-- 左侧级联分类列表 -->
      <van-sidebar class="leftmenu" v-model="activeKey">
        <van-collapse v-model="activeName" accordion>
          <van-collapse-item v-for="item in categories" :key="item.id" :title="item.name" :name="item.name">
            <van-sidebar-item v-for="sub in item.children" :key="sub.id" :title="sub.name" @click="getGoods(sub.id)" />
          </van-collapse-item>
        </van-collapse>
      </van-sidebar>

      <!-- 中间渲染分类商品数据 -->
      <div class="goodslist">
        <div class="content">
          <van-card v-for="item in showGoods" :key="item.id" @click="itemClick(item.id)" :num="item.comments_count"
            :tag="item.comments_count>0?'流行':'标签'" :price="item.price" :desc="item.updated_at" :title="item.title"
            :thumb="item.cover_url" :lazy-load="true" />
        </div>
      </div>
    </div>
    <back-top v-show="isShowBackTop" @bTop="bTop"></back-top>
  </div>
</template>

<script>
  import BackTop from 'components/common/backtop/BackTop';
  import NavBar from "components/common/navbar/NavBar"
  import {
    ref,
    reactive,
    onMounted,
    computed,
    watchEffect,
    nextTick
  } from 'vue';
  import {
    useRouter
  } from 'vue-router';
  import {
    getCategory,
    getCategoryGoods
  } from 'network/category';
  import BScroll from 'better-scroll';
  export default {
    name: 'Categroy',
    setup() {
      const router = useRouter();
      let active = ref(0);
      let activeKey = ref(0)
      let categories = ref([])
      let activeName = ref(1)
      let isShowBackTop = ref(false)

      //当前的排序条件
      let currentOrder = ref('sales')
      //当前的分类ID
      let currentCid = ref(0)
      //数据模型
      const goods = reactive({
        sales: {
          page: 1,
          list: []
        },
        price: {
          page: 1,
          list: []
        },
        comments_count: {
          page: 1,
          list: []
        }
      })

      const showGoods = computed(() => {
        return goods[currentOrder.value].list
      })

      const init = () => {
        getCategoryGoods('sales', currentCid.value).then(res => {
          goods.sales.list = res.goods.data;
        })
        getCategoryGoods('price', currentCid.value).then(res => {
          goods.price.list = res.goods.data;
        })
        getCategoryGoods('comments_count', currentCid.value).then(res => {
          goods.comments_count.list = res.goods.data;
        })
      }

      let bscroll = reactive({})

      onMounted(() => {
        getCategory().then(res => {
          categories.value = res.categories;
        })
        init()
        //创建BetterScroll对象
        bscroll = new BScroll(document.querySelector('.goodslist'), {
          probeType: 3, //0,1,2,3 3只要运动就触发scroll事件
          click: true, //是否允许点击触发事件
          pullUpLoad: true //上拉加载更多，默认是false
        });

        //注册滚动事件
        bscroll.on('scroll', (position) => {
          isShowBackTop.value = (-position.y) > 300
        })

        //上拉加载数据，触发pullingUp
        bscroll.on("pullingUp", () => {

          const page = goods[currentOrder.value].page;
          getCategoryGoods(currentOrder.value, currentCid.value).then(res => {
            goods[currentOrder.value].list.push(...res.goods.data)
            goods[currentOrder.value].page += 1;
          })
          //完成上拉，等数据加载完，把新数据展示出来
          bscroll.finishPullUp();
          //重新计算高度
          bscroll.refresh()
        })
      })

      //排序选项卡
      const tabClick = (index) => {
        let orders = ['sales', 'price', 'comments_count']
        currentOrder.value = orders[index]
        getCategoryGoods(currentOrder.value, currentCid.value).then(res => {
          goods[currentOrder.value].list = res.goods.data;

          nextTick(() => {
            //重新计算高度
            bscroll && bscroll.refresh();
          })
        })
        console.log("当前的分类id：" + currentCid.value);
        console.log("排序的序号：" + currentOrder.value);
      }

      //通过分类get商品
      const getGoods = (cid) => {
        currentCid.value = cid
        init()
        console.log("当前的分类id：" + currentCid.value);
        console.log("排序的序号：" + currentOrder.value);
      }

      //监听 任何一个变量有变化就会触发
      watchEffect(() => {
        nextTick(() => {
          //重新计算高度
          bscroll && bscroll.refresh();
        })
      })

      //回到顶部
      const bTop = () => {
        bscroll.scrollTo(0, 0, 300)
      }
      return {
        activeKey,
        categories,
        activeName,
        active,
        tabClick,
        currentOrder,
        currentCid,
        getGoods,
        goods,
        showGoods,
        bscroll,
        isShowBackTop,
        bTop,
        itemClick: (id) => {
          console.log(id);
          router.push({
            path: '/detail',
            query: {
              id
            }
          })
        }
      }
    },
    components: {
      NavBar,
      BackTop
    }
  }
</script>

<style scoped lang="scss">
  #mainbox {
    margin-top: 45px;
    display: flex;

    .ordertab {
      flex: 1;
      float: right;
      height: 50px;
      z-index: 9;
      position: fixed;
      top: 45px;
      right: 0;
      left: 130px;
      ;
    }

    .leftmenu {
      position: fixed;
      top: 95px;
      left: 0;
      width: 130px;
    }

    .goodslist {
      flex: 1;
      position: absolute;
      top: 100px;
      left: 130px;
      right: 0;
      height: 100vh;
      padding: 10px;
      text-align: left !important;
    }
  }
</style>